<script setup lang="ts">
import {computed} from "vue";

let flexWrap = ref(false)
let varFlexWrap = computed(() => {
  return flexWrap.value ? "wrap" : "nowrap"
})
</script>

<template>
  <div class="wrap">
    <div class="form">
      <label for="flexWrap" class="toggle">
        <span class="toggle__label">切换 flex-wrap 属性的值：nowrap / wrap</span>
        <input v-model="flexWrap" type="checkbox" role="switch" class="toggle_element" id="flexWrap" checked>
        <div class="toggle__decor" aria-hidden="true">
          <div class="toggle__thumb"></div>
        </div>
      </label>
    </div>
    <div class="container">
      <div class="item">Flex Item One</div>
      <div class="item">Flex Item Two</div>
      <div class="item">Flex Item Three</div>
      <div class="item">Flex Item Four</div>
      <div class="item">Flex Item Five, with Long Lonnnnnng Text</div>
      <div class="item">Flex Item Six</div>
    </div>

    <div class="container" dir="rtl">
      <div class="item">فليكس البند الأول</div>
      <div class="item">فليكس البند الثاني</div>
      <div class="item">فليكس البند الثالث</div>
      <div class="item">فليكس البند الرابع</div>
      <div class="item">العنصر الخامس المرن، مع نص طويل</div>
      <div class="item">فليكس البند السادس</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.wrap {
  --var-flex-wrap: v-bind(varFlexWrap);
  --color-primary: #3740ff;
  --color-primary-dark: #272eb5;
  --color-primary-light: #3740ff;
  --color-primary-x-light: #e8f0fe;
  --color-light: #ffffff;
  --color-dark: #202124;
  --color-off-white: #f3f4f4;
  --color-mid: #5f6368;
  --color-mid-dark: #3c4043;
  --color-stroke: #dadce0;
  --metric-gutter: 1.5rem;
  --metric-box-spacing: 1rem;
  --metric-radius: 3px;
  --generic-shadow: 0px 1px 2px rgba(60, 64, 67, 0.3),
  0px 2px 6px 2px rgba(60, 64, 67, 0.15);
  --font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;

  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: grid;
  grid-template-rows: min-content 1fr 1fr;
  gap: 1rem;
  // place-content 是align-content 和 justify-content 的简写，使用这两个属性值可以用于任何的布局情况
  place-content: center;
  padding: 1rem;

  .form {
    .toggle {
      --metric-toggle-thumb-size: 1rem;
      --metric-toggle-thumb-space: 0.25rem;
      position: relative;
      display: inline-flex;
      align-items: center;

      &::after {
        content: "\A";
        white-space: pre;
      }

      .toggle_element {
        opacity: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: var(--metric-toggle-thumb-size);
        width: 1em;
        height: 1em;
        &:checked + .toggle__decor {
          background: var(--color-primary-light);
          .toggle__thumb {
            transform: translateX(var(--metric-toggle-thumb-size)) rotate(270deg);
          }
        }
      }

      .toggle__decor {
        display: block;
        position: relative;
        overflow: hidden;
        width: calc(
            (var(--metric-toggle-thumb-size) * 2) +
            (var(--metric-toggle-thumb-space) * 2)
        );
        height: calc(
            var(--metric-toggle-thumb-size) + (var(--metric-toggle-thumb-space) * 2)
        );
        background: var(--color-mid);
        margin-left: 0.5rem;
        border-radius: var(--metric-toggle-thumb-size);
        box-sizing: content-box;
        border: 1px solid var(--color-light);

        .toggle__thumb {
          display: grid;
          place-items: center;
          width: var(--metric-toggle-thumb-size);
          height: var(--metric-toggle-thumb-size);
          border-radius: var(--metric-toggle-thumb-size);
          background: linear-gradient(
                  229.84deg,
                  rgba(255, 255, 255, 0) 14.29%,
                  rgba(48, 48, 48, 0.15) 81.82%
          ),
          #ffffff;
          box-shadow: var(--generic-shadow);
          position: absolute;
          top: var(--metric-toggle-thumb-space);
          left: var(--metric-toggle-thumb-space);
          transform: none;
          transition: transform 200ms cubic-bezier(1, 0, 0.55, 0.85);
          // 告知浏览器该元素会有哪些变化方法，浏览器提前做好优化准备工作，使页面的反应更为快速灵敏
          will-change: transform;
          z-index: 1;
          &::before {
            content: "";
            display: none;
            width: calc(
                var(--metric-toggle-thumb-size) - var(--metric-toggle-thumb-space)
            );
            height: calc(
                var(--metric-toggle-thumb-size) - var(--metric-toggle-thumb-space)
            );
            border: 1px solid var(--color-primary-light);
            border-radius: calc(
                var(--metric-toggle-thumb-size) - var(--metric-toggle-thumb-space)
            );
          }
        }
      }
    }
  }

  .container {
    inline-size: 80vw;
    padding: 1rem;
    gap: 1rem;
    background: #fff;
    border: 3px solid #88978a;
    border-radius: 10px;
    display: flex;
    flex-wrap: var(--var-flex-wrap);
    .item {
      background: #e8f0fe;
      border: 2px solid #2938e9;
      border-radius: 4px;
      color: #000;
      padding: 1rem;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      inline-size: 180px;
      aspect-ratio: 1;
      &:nth-child(2) {
        background-color: #efe1ff;
      }
      &:nth-child(3) {
        background-color: #bbd7af;
      }
      &:nth-child(4) {
        background-color: #ecbbbb;
      }
      &:nth-child(5) {
        background-color: #00f0ff;
      }
      &:nth-child(6) {
        background-color: #d7af0a;
      }
    }
  }
}
</style>
